<template>
  <div class="min-h-screen bg-background-900 flex items-center justify-center">
    <div class="text-center space-y-10">
      <!-- 网站标题 -->
      <div class="space-y-4">
        <h1 class="text-5xl font-bold gradient-text mb-4">虚构影评</h1>
        <p class="text-text-secondary text-xl">加入我们，探索平行宇宙中的电影艺术</p>
        <div class="flex items-center justify-center gap-2 text-text-muted">
          <div class="w-2 h-2 bg-ai-generated rounded-full animate-pulse"></div>
          <div class="w-2 h-2 bg-fictional rounded-full animate-pulse" style="animation-delay: 0.2s"></div>
          <div class="w-2 h-2 bg-primary-500 rounded-full animate-pulse" style="animation-delay: 0.4s"></div>
        </div>
      </div>

      <!-- 认证按钮 -->
      <div class="space-y-4">
        <UiButton
          @click="openLoginModal"
          variant="primary"
          size="xl"
          class="w-72"
        >
          <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
            <path d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"/>
          </svg>
          登录
        </UiButton>
        
        <UiButton
          @click="openRegisterModal"
          variant="secondary"
          size="xl"
          class="w-72"
        >
          <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
            <path d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"/>
          </svg>
          注册
        </UiButton>
      </div>

      <!-- 说明文字 -->
      <div class="card max-w-lg mx-auto">
        <div class="flex items-center gap-3 mb-4">
          <div class="w-8 h-8 bg-gradient-ai rounded-lg flex items-center justify-center">
            <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
              <path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
            </svg>
          </div>
          <h3 class="text-lg font-semibold text-text-primary">功能说明</h3>
        </div>
        <p class="text-text-secondary mb-4">点击上方按钮体验悬浮认证卡片功能</p>
        <div class="space-y-2 text-sm text-text-muted">
          <p class="font-medium text-text-primary">支持功能：</p>
          <ul class="space-y-1 text-left">
            <li class="flex items-center gap-2">
              <div class="w-1.5 h-1.5 bg-primary-500 rounded-full"></div>
              邮箱/密码登录和注册
            </li>
            <li class="flex items-center gap-2">
              <div class="w-1.5 h-1.5 bg-ai-generated rounded-full"></div>
              Google OAuth登录
            </li>
            <li class="flex items-center gap-2">
              <div class="w-1.5 h-1.5 bg-fictional rounded-full"></div>
              邮箱确认重发
            </li>
            <li class="flex items-center gap-2">
              <div class="w-1.5 h-1.5 bg-success rounded-full"></div>
              登录/注册模式切换
            </li>
            <li class="flex items-center gap-2">
              <div class="w-1.5 h-1.5 bg-warning rounded-full"></div>
              点击背景或关闭按钮关闭
            </li>
          </ul>
        </div>
      </div>
    </div>

    <!-- 认证管理器 -->
    <AuthManager ref="authManagerRef" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { AuthManager } from '../components/auth'
import { UiButton } from '../components/ui'

const authManagerRef = ref()

const openLoginModal = () => {
  authManagerRef.value?.openLogin()
}

const openRegisterModal = () => {
  authManagerRef.value?.openRegister()
}
</script> 